<template>
  <p-form-model ref="form" :model="form" :rules="rules">
    <div class="item">
      <div class="item-left">
        <p-form-model-item
          v-if="showForm"
          :label="label.leadsNo"
          prop="leadsNo"
          class="form-item"
        >
          <span>{{ form.leadsNo }}</span>
        </p-form-model-item>
        <p-form-model-item
          v-if="follow"
          :label="label.leadsName"
          class="form-item"
        >
          <span>{{ form.leadsName }}</span>
        </p-form-model-item>
        <p-form-model-item
          v-else
          :label="label.leadsName"
          prop="leadsName"
          class="form-item"
        >
          <p-input v-model="form.leadsName" placeholder="请输入" />
          <p-button
            v-if="showCopy"
            class="copy-clue"
            @click="visibleClueList = true"
          >
            复制线索
          </p-button>
        </p-form-model-item>
        <p-form-model-item :label="label.leadsSource" prop="leadsSource">
          <SelectDefault
            v-model="form.leadsSource"
            :has-all="false"
            code="leads_source"
            @input="handleSelectChange($event, 'leadsSource')"
          />
        </p-form-model-item>
        <p-form-model-item :label="label.custItemNo" prop="custItemNo">
          <p-input v-model="form.custItemNo" placeholder="请输入" />
        </p-form-model-item>
        <p-form-model-item :label="label.custItemStep" prop="custItemStep">
          <p-input v-model="form.custItemStep" placeholder="请输入" />
        </p-form-model-item>
        <p-form-model-item :label="label.itemDemandNum" prop="itemDemandNum">
          <p-input
            v-model.number="form.itemDemandNum"
            placeholder="请输入"
            style="width: 85%"
          />
          (kpcs)
        </p-form-model-item>
        <p-form-model-item :label="label.expectPrice" prop="expectPrice">
          <p-input
            v-model.number="form.expectPrice"
            placeholder="请输入"
            style="width: 85%"
          />
          (元/片)
        </p-form-model-item>
        <p-form-model-item :label="label.salesOrgCode" prop="salesOrgCode">
          <span v-if="follow">{{ orgOptions[form.salesOrgCode] }}</span>
          <SelectOrg
            v-else
            v-model="form.salesOrg"
            :has-all="false"
            :allow-clear="true"
            :label-in-value="true"
            @input="handleOrgChange"
            @focus="handlefocus"
          />
        </p-form-model-item>
        <p-form-model-item :label="label.salesGroup" prop="salesGroup">
          <span v-if="follow">{{ form.salesGroupName }}</span>
          <SelectOrg
            v-else
            v-model="form.salesGroup"
            :options="orgGroupOptions"
            :has-default="false"
            :has-all="false"
            :allow-clear="false"
            :label-in-value="true"
            @input="handleSelectChange($event, 'orgGroupOptions')"
          />
        </p-form-model-item>
        <p-form-model-item :label="label.pmGroup" prop="pmGroup">
          <span v-if="follow">{{ form.pmGroupName }}</span>
          <SelectOrg
            v-else
            v-model="form.pmGroup"
            :options="orgKapmOptions"
            :has-default="false"
            :allow-clear="true"
            :has-all="false"
            :label-in-value="true"
            @input="handleSelectChange($event, 'orgKapmOptions')"
          />
        </p-form-model-item>
      </div>
      <div class="item-right">
        <p-form-model-item
          v-if="showForm"
          :label="label.currStatus"
          prop="currStatus"
          class="form-item"
        >
          <span>
            {{
              stateOptions[form.currStatus] || statusOptions[form.leadsStatus]
            }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          v-if="follow"
          :label="label.customerName"
          class="form-item"
        >
          <span>{{ form.customerName }}</span>
        </p-form-model-item>
        <p-form-model-item
          v-else
          :label="label.customerName"
          prop="customerName"
          class="form-item"
        >
          <p-input
            v-model="form.customerName"
            disabled
            placeholder="请输入"
            style="background-color: #fff; cursor: default; color: #000"
          />
          <InputSearch
            class="searchIcon"
            :is-edit="true"
            @search="visibleCustomer = true"
          />
        </p-form-model-item>
        <p-form-model-item :label="label.assessLevel" prop="assessLevel">
          <SelectDefault
            v-model="form.assessLevel"
            :has-all="false"
            code="leads_level"
            @input="handleSelectChange($event, 'assessLevel')"
          />
        </p-form-model-item>
        <p-form-model-item :label="label.custItemName" prop="custItemName">
          <p-input v-model="form.custItemName" placeholder="请输入" />
        </p-form-model-item>
        <p-form-model-item :label="label.appCategory" prop="appCategory">
          <SelectDefault
            v-model="form.appCategory"
            :has-all="false"
            code="application"
            @input="handleSelectChange($event, 'appCategory')"
          />
        </p-form-model-item>
        <p-form-model-item :label="label.expectAmount" prop="expectAmount">
          <p-input
            v-model.number="form.expectAmount"
            placeholder="请输入"
            style="width: 85%"
          />
          (kpcs)
        </p-form-model-item>
        <p-form-model-item :label="label.expectCost" prop="expectCost">
          <span>{{ form.expectCost }}</span>
          (元)
        </p-form-model-item>
        <p-form-model-item
          v-if="showForm"
          :label="label.salesAreaName"
          prop="salesAreaName"
        >
          <span>{{ customerArea[form.salesAreaName] }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.salesName" prop="salesName">
          <span>{{ form.salesName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.pmName" prop="pmName">
          <span>{{ form.pmName }}</span>
        </p-form-model-item>
      </div>
    </div>
    <p-form-model-item :label="label.remark" prop="remark">
      <p-textarea
        v-model="form.remark"
        style="height: 70px; resize: none"
        placeholder="请输入"
      />
    </p-form-model-item>
    <div class="item">
      <div class="item-left">
        <p-form-model-item
          v-if="!follow"
          class="form-item"
          :label="label.deptMgrUserId"
          prop="deptMgrUserId"
        >
          <SelectDepcMgrInfo v-model="form.deptMgrUserId" @input="changDep" />
        </p-form-model-item>
      </div>
      <div></div>
    </div>
    <div v-if="showForm" class="item">
      <div class="item-left">
        <p-form-model-item
          :label="label.createUserName"
          prop="createUserName"
          class="form-item"
        >
          <span>{{ form.createUserName }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.createDeptName"
          prop="createDeptName"
          class="form-item"
        >
          <span>{{ form.createDeptName }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.updateUserName"
          prop="updateUserName"
          class="form-item"
        >
          <span>{{ form.updateUserName }}</span>
        </p-form-model-item>
      </div>
      <div class="item-right">
        <p-form-model-item
          :label="label.creatTime"
          prop="creatTime"
          class="form-item"
        >
          <span>{{ form.createTime }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.updateTime"
          prop="updateTime"
          class="form-item"
        >
          <span>{{ form.updateTime }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.updateDeptName"
          prop="updateDeptNanme"
          class="form-item"
        >
          <span>{{ form.updateDeptName }}</span>
        </p-form-model-item>
      </div>
    </div>
    <DialogUserList
      :visible.sync="visibleCustomer"
      :value="value"
      @change="changeCustomer"
      @number-click="handleNumberClick"
    />
    <DialogSelectClue
      :visible.sync="visibleClueList"
      @change="copyClue"
      @number-click="numberInfo"
    />
  </p-form-model>
</template>

<script>
import { postDepcMgrInfo } from '@/api/public.js';
import SelectDepcMgrInfo from '@/components/select/SelectDepcMgrInfo.vue';
import DialogUserList from '@/components/dialog/DialogUserList.vue';
import DialogSelectClue from '@/views/clue-creation/components/DialogSelectClue.vue';
export default {
  components: {
    DialogUserList,
    DialogSelectClue,
    SelectDepcMgrInfo,
  },
  props: {
    form: {
      type: Object,
      default: () => {},
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
    showForm: {
      type: Boolean,
      default: true,
    },
    follow: {
      type: Boolean,
      default: false,
    },
    label: {
      type: Object,
      default: () => ({
        leadsNo: '线索编号',
        currStatus: '当前状态',
        leadsName: '线索名称',
        leadsSource: '来源',
        custItemNo: '客户项目号',
        custItemStep: '客户项目阶段',
        itemDemandNum: '客户项目需求总量',
        expectPrice: '预期价格',
        salesOrgCode: '销售组织',
        salesGroup: '销售组',
        pmGroup: 'KAPM组',
        customerName: '客户',
        assessLevel: '评估级别',
        custItemName: '客户项目名称',
        appCategory: '应用别',
        expectAmount: '预期数量',
        expectCost: '预期价值',
        salesAreaName: '销售区域',
        salesName: '销售',
        pmName: 'PM',
        remark: '备注',
        createUserName: '创建人',
        createDeptName: '创建人部门',
        updateUserName: '修改人',
        creatTime: '创建时间',
        updateTime: '修改时间',
        updateDeptName: '修改人部门',
        deptMgrUserId: '发起人部门主管',
      }),
    },
  },
  data() {
    return {
      rules: {
        leadsName: [
          { required: true, message: '请输入线索名称！', trigger: 'blur' },
          {
            min: 1,
            max: 200,
            message: '长度不能超过200个字符',
            trigger: 'blur',
          },
        ],
        custItemNo: [
          { max: 200, message: '长度不能超过200个字符', trigger: 'blur' },
        ],
        custItemName: [
          { max: 200, message: '长度不能超过200个字符', trigger: 'blur' },
        ],
        custItemStep: [
          { max: 200, message: '长度不能超过200个字符', trigger: 'blur' },
        ],
        itemDemandNum: [
          {
            pattern: /^\+?[1-9]\d*$/,
            message: '请输入一个大于0的整数',
            trigger: 'blur',
          },
          {
            max: 1000000000,
            message: '总量不能超过十亿',
            trigger: 'blur',
            type: 'number',
          },
        ],
        expectPrice: [
          {
            pattern: /^(0\.[0-9]{2})$|^([1-9][0-9]*)$|^([1-9][0-9]*\.[0-9]{1,2})$|^0$/,
            message: '只支持大于等于0的数，允许输入两位小数',
            trigger: 'blur',
          },
          {
            max: 1000000000,
            message: '总量不能超过十亿',
            trigger: 'blur',
            type: 'number',
          },
        ],
        expectAmount: [
          {
            pattern: /^\+?[1-9]\d*$/,
            message: '请输入一个大于0的整数',
            trigger: 'blur',
          },
          {
            max: 1000000000,
            message: '总量不能超过十亿',
            trigger: 'blur',
            type: 'number',
          },
        ],
        salesOrgCode: [
          { required: true, message: '请选择销售组织', trigger: 'blur' },
        ],
        leadsSource: [
          { required: true, message: '请选择来源', trigger: 'change' },
        ],
        appCategory: [
          { required: true, message: '请选择应用别', trigger: 'change' },
        ],
        customerName: [
          { required: true, message: '请选择客户', trigger: 'blur' },
        ],
        salesGroup: [
          { required: true, message: '请选择销售组', trigger: 'change' },
        ],
        pmGroup: [
          { required: true, message: '请选择KAPM组', trigger: 'change' },
        ],
        deptMgrUserId: [
          { required: true, message: '请选择部门主管', trigger: 'change' },
        ],
      },
      visibleClueList: false,
      visibleCustomer: false,
      parentId: undefined,
    };
  },
  computed: {
    customerArea() {
      return this.$store.state.dictionary.dict['customer_area'] || {};
    },
    orgGroupOptions() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'sales',
        isDict: false,
      });
    },
    orgKapmOptions() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'kapm',
        isDict: false,
      });
    },
    orgOptions() {
      return this.$store.state.dictionary.dict['ltcsmsizebu'] || {};
    },
    stateOptions() {
      return this.$store.state.dictionary.dict['leads_create_status'] || {};
    },
    statusOptions() {
      return this.$store.state.dictionary.dict['leads_status'] || {};
    },
    showCopy() {
      return !this.showForm;
    },
    uid() {
      return this.$store.state.user.uid;
    },
  },
  watch: {
    'form.expectAmount': {
      handler(val) {
        this.form.expectCost = (val * this.form.expectPrice).toFixed(2);
      },
    },
    'form.expectPrice': {
      handler(val) {
        this.form.expectCost = (val * this.form.expectAmount).toFixed(2);
      },
    },
    immediate: true,
    deep: true,
  },
  created() {
    this.getDepcMgr();
  },
  methods: {
    async getDepcMgr() {
      const res = await postDepcMgrInfo();
      const data = res.data.data;
      if (!this.showForm) {
        this.form.deptMgrUserId = data[0].uid;
      }
    },
    numberInfo(val) {
      this.$emit('number-click', val);
    },
    // 选择客户
    changeCustomer(val) {
      this.form.customerShortName = val.label;
      this.form.customerCode = val.key;
      this.form.customerName = val.customerName;
      this.form.salesOrgCode = val.salesOrgCode;
      this.form.salesOrg = {
        key: val.salesOrgCode,
        label: val.salesOrgName,
      };
      console.log(val, 'val');
      this.form.salesAreaName = val.salesAreaName;
      if (val.salesGroupCode.includes(',')) {
        this.form.salesGroup = {};
      } else {
        this.form.salesGroup.key = val.salesGroupCode;
        this.form.salesGroup.label = val.salesGroupName;
      }
      if (val.pmGroupCode.includes(',')) {
        this.form.pmGroup = {};
      } else {
        this.form.pmGroup.key = val.pmGroupCode;
        this.form.pmGroup.label = val.pmGroupName;
      }
    },
    // 复制线索
    copyClue(val) {
      this.form.leadsName = val.leadsName;
      this.form.leadsSource = val.leadsSource;
      this.form.custItemName = val.custItemName;
      this.form.custItemNo = val.custItemNo;
      this.form.custItemStep = val.custItemStep;
      this.form.itemDemandNum = val.itemDemandNum;
      this.form.expectPrice = val.expectPrice;
      this.form.expectCost = val.expectCost;
      this.form.expectAmount = val.expectAmount;
      this.form.salesOrgCode = val.salesOrgCode;
      this.form.salesGroup = {
        key: val.salesGroupCode,
        label: val.salesGroupName,
      };
      this.form.pmGroup = {
        key: val.pmGroupCode,
        label: val.pmGroupName,
      };
      this.form.salesGroupCode = val.salesGroupCode;
      // this.form.pmGroupCode = val.pmGroupCode;
      // this.form.salesGroupName = val.salesGroupName;
      // this.form.pmGroupName = val.pmGroupName;
      this.form.customerName = val.customerName;
      this.form.assessLevel = val.assessLevel;
      this.form.customerCode = val.customerCode;
      this.form.appCategory = val.appCategory;
      this.form.customerCode = val.customerCode;
      this.form.customerShortName = val.customerShortName;
      this.form.salesOrg = {
        key: val.salesOrgCode,
        label: val.salesOrgName,
      };
    },
    validate() {
      return new Promise(resolve => {
        this.$refs.form.validate(valid => {
          resolve(valid);
        });
      });
    },
    handlefocus() {
      // if (this.form.customerName === '') {
      //   this.$message.warning('请先选择客户!');
      // }
    },
    handleOrgChange(val) {
      this.form.saleOrg = val;
      this.form.salesOrgCode = val.key;
      this.form.salesOrgName = val.label;
      this.form.salesGroupCode = '';
      this.form.pmGroupCode = '';
    },
    handleSelectChange(val, key) {
      this.form[key] = val;
    },
    changDep(val) {
      this.form.deptMgrUserId = val;
    },
    handleNumberClick(record) {
      this.$router.push({
        path: '/customer-creation',
        query: {
          id: record.id,
          nodeCode: record.nodeCode,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  display: flex;
  justify-content: space-between;
  .item-left,
  .item-right {
    width: 48%;
    display: inline-block;
  }
}

.poros-form-item {
  display: flex;
  flex-wrap: nowrap;
  //   margin-bottom: 10px;
}
// .item {
//   width: 48%;
//   display: inline-block;
// }
/deep/ .poros-form-item-label {
  width: 120px;
  margin-right: 20px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 250px);
}
.form-item {
  position: relative;
  .copy-clue {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(110%, -25%);
  }
  .searchIcon {
    position: absolute;
    top: 0;
    right: 5px;
  }
}
</style>
